@extends('statistical.layout')
@push('css')
    <link rel="stylesheet" href="{{ asset('admin-assets/plugins/datepicker/datepicker3.css') }}"/>
    <style>
        .i-row {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            margin: 30px auto;
            padding: 20px 2px;
            border-top: 2px solid #74AFF1;
            border-bottom: 2px solid #74AFF1;
            position: relative;
        }

        .i-row .i-content {
            width: 25%;
            text-align: center;
            margin-left: 10px;
            border-radius: 5px;
            font-size: 12px;
        }

        .i-content > .i-label {
            color: white;
            padding: 15px 0;
        }

        .i-content > .i-text {
            padding: 8px 0;
        }

        .i-content > .i-text > p {
            margin: 0;
        }

        .i-content > .i-text > p:last-child {
            color: #AAAAAA;
        }


        .i-blue > .i-content {
            border: 1px solid #0064D3;
        }

        .i-blue > .i-content > .i-label {
            background: #0064D3;
        }

        .i-red > .i-content {
            border: 1px solid #FF0024;
        }

        .i-red > .i-content > .i-label {
            background: #FF0024;
        }

        .i-orange > .i-content {
            border: 1px solid #FD752E;
        }

        .i-orange > .i-content > .i-label {
            background: #FD752E;
        }

        .color-red {
            color: red;
        }

        h5 {
            position: absolute;
            top: -18px;
            left: 10px;
            background: white;
        }

        .i-group {
            display: flex;
        }

        input.end {
            margin-right: 10px;
        }
    </style>
@endpush
@section("content")
    <div style="margin-bottom: 10px">
        <span style="color: #0064D3">
            @if ($is_today)
                今日数据
            @else
                历史数据
            @endif
        </span>
        最后更新时间: <span
                style="color: red">{{ \Illuminate\Support\Arr::get($data, 'updated_at') }}</span>
    </div>
    <div class="i-form">
        <form>
            <div class="i-group">
                <input type="text"
                       class="form-control date-time"
                       name="start_time"
                       value="{{ $start_time }}"
                >
                <span style="display: inline-block;line-height: 34px;margin: 0 5px"> - </span>
                <input type="text"
                       class="form-control date-time end"
                       name="end_time"
                       value="{{ $end_time }}"
                >
                <button type="submit" class="btn btn-primary">
                    查询
                </button>
            </div>
        </form>
    </div>
    <div class="i-row i-blue">
        <h5><span class="color-red">成功充值</span>数据</h5>
        <div class="i-content">
            <div class="i-label">充值总额</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($total, 'total_success_amount', 0) ?: 0  }}</p>
                <p>{{ number_format($total_amount > 0 ? (\Illuminate\Support\Arr::get($total, 'total_success_amount', 0) / $total_amount * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">充值笔数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($total, 'total_success_num', 0) ?: 0  }}</p>
                <p>{{ number_format($total_num > 0 ? (\Illuminate\Support\Arr::get($total, 'total_success_num', 0) / $total_num * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">@if ($is_today)今日@endif总额</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'success_amount', 0) ?: 0  }}</p>
                <p>{{ number_format($today_total_amount > 0 ? (\Illuminate\Support\Arr::get($data, 'success_amount', 0) / $today_total_amount * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">@if ($is_today)今日@endif笔数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'success_num', 0) ?: 0  }}</p>
                <p>{{ number_format($today_total_num > 0 ? (\Illuminate\Support\Arr::get($data, 'success_num', 0) / $today_total_num * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
    </div>

    <div class="i-row i-red">
        <h5><span class="color-red">未充值</span>数据</h5>
        <div class="i-content">
            <div class="i-label">总金额</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($total, 'total_not_amount', 0) ?: 0  }}</p>
                <p>{{ number_format($total_amount > 0 ? (\Illuminate\Support\Arr::get($total, 'total_not_amount', 0) / $total_amount * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">总笔数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($total, 'total_not_num', 0) ?: 0  }}</p>
                <p>{{ number_format($total_num > 0 ? (\Illuminate\Support\Arr::get($total, 'total_not_num', 0) / $total_num * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">@if ($is_today)今日@endif金额</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'not_amount', 0) ?: 0  }}</p>
                <p>{{ number_format($today_total_amount > 0 ? (\Illuminate\Support\Arr::get($data, 'not_amount', 0) / $today_total_amount * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">@if ($is_today)今日@endif笔数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'not_num', 0) ?: 0  }}</p>
                <p>{{ number_format($today_total_num > 0 ? (\Illuminate\Support\Arr::get($data, 'not_num', 0) / $today_total_num * 100) : 0,2, '.', '')  }}
                    %</p>
            </div>
        </div>
    </div>

    <div class="i-row i-orange">
        <h5><span class="color-red">@if ($is_today)今日@endif用户</span>数据</h5>
        <div class="i-content">
            <div class="i-label">充值用户总数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'user_count', 0) ?: 0 }}</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">二次以上用户数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'user_two_count', 0) ?: 0 }}</p>
            </div>
        </div>
        <div class="i-content">
            <div class="i-label">三次以上用户数</div>
            <div class="i-text">
                <p>{{ \Illuminate\Support\Arr::get($data, 'user_three_count', 0) ?: 0  }}</p>
            </div>
        </div>
    </div>
@endsection
@push('javascript')
    <script src="{{ asset('admin-assets/plugins/datepicker/moment.min.js') }}"></script>
    <script src="{{ asset('admin-assets/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
    <script src="{{ asset('admin-assets/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js') }}"></script>
    <script>
        $("input.date-time").datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn: 'linked',
        })
    </script>
@endpush
